<!DOCTYPE html>
<html>
<head>
    <title>MVVM</title>

    <link href="../../content/shared/styles/examples-offline.css" rel="stylesheet">
    <link href="../../../styles/kendo.common.min.css" rel="stylesheet">
    <link href="../../../styles/kendo.default.min.css" rel="stylesheet">

    <script src="../../../js/jquery.min.js"></script>
    <script src="../../../js/kendo.web.min.js"></script>
    <script src="../../content/shared/js/console.js"></script>
    <script>
        
    </script>
    
    
</head>
<body>
    
        <a class="offline-button" href="../index.html">Back</a>
    
    <div id="example" class="k-content">
    <div class="demo-section files">
        <h3><span data-bind="text: name"></span>'s files</h3>
        <div data-role="treeview"
            data-drag-and-drop="true"
            data-text-field="name"
            data-spritecssclass-field="type"
            data-bind="source: files"></div>
    </div>

    <div class="demo-section current-state">
        <h4>Current view model state:</h4>
        <pre>
{
    name: <span data-bind="text: name"></span>,
    files: <span data-bind="text: printFiles"></span>
}
        </pre>
    </div>

    <script>
        $(document).ready(function() {
            var viewModel = kendo.observable({
                name: "John Doe",
                files: kendo.observableHierarchy([
                    { name: "My Web Site", type: "folder", expanded: true, items: [
                        { name: "images", type: "folder", expanded: true, items: [
                            { name: "logo.png", type: "image" },
                            { name: "body-back.png", type: "image" },
                            { name: "my-photo.jpg", type: "image" }
                        ] },
                        { name: "resources", type: "folder", expanded: true, items: [
                            { name: "resources", type: "folder" },
                            { name: "zip", type: "folder" }
                        ] },
                        { name: "about.html", type: "html" },
                        { name: "contacts.html", type: "html" },
                        { name: "index.html", type: "html" },
                        { name: "portfolio.html", type: "html" }
                    ] }
                ]),
                printFiles: function() {
                    // helper function that prints the relevant data from the hierarchical model
                    var items = this.get("files").toJSON();

                    function removeFields(item) {
                        delete item.index;

                        if (item.items.length == 0) {
                            delete item.items;
                        } else {
                            item.items = $.map(item.items, removeFields);
                        }

                        return item;
                    }

                    $.map(items, removeFields);

                    var jsonString = JSON.stringify(items, null, 2);

                    return jsonString.replace(/\n/gi, "\n    ")
                                .replace(/\n\s*("name)/gi, " $1")
                                .replace(/\n\s*("type)/gi, " $1")
                                .replace(/\n\s*("expanded)/gi, " $1")
                                .replace(/\n\s*("selected)/gi, " $1")
                                .replace(/\n\s*("items)/gi, " $1")
                                .replace(/\s*\n\s*(})/gi, " $1")
                                .replace(/(\s*)]\n\s*}/gi, "] }");
                }
            });

            kendo.bind($("#example"), viewModel);
        });
    </script>

    <style scoped>
        .current-state {
            margin: 20px 0 0;
        }

        .current-state pre {
            font-size: 12px;
        }

        .files h3 {
            color: #787878;
            border-bottom: 1px solid #ccc;
            padding-bottom: .4em;
            margin-bottom: .4em;
        }

        .files .k-treeview {
            height: 300px;
        }

        .files .k-sprite {
            background-image: url("../../content/web/treeview/coloricons-sprite.png");
        }

        .rootfolder { background-position: 0 0; }
        .folder { background-position: 0 -16px; }
        .pdf { background-position: 0 -32px; }
        .html { background-position: 0 -48px; }
        .image { background-position: 0 -64px; }
    </style>
</div>

</body>
</html>
